<template>
  <view class="index">
    <view class="content">
      
      <view class="images">
        <view class="site-box">
          <view>
            <image class="site-name" src="/static/img/site.png"></image>
          </view>
        </view>
        <view class="logo-box">
          <view>
            <image class="logo" src="/static/img/login.png"></image>
          </view>
        </view>
      </view>
      
      <view class="des"> 
        <view>Dating with everyone in the world by character</view>
      </view>
      
      <view class="buttons">
        <view class="reg"  @tap="reg">JOIN US</view>
        <view class="login" @tap="login">SIGN IN</view>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
      reg() {
        uni.navigateTo({
          url: '/pages/reg/reg'
        });
      },
      login() {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }
		}
	}
</script>

<style>

	.index .content {
		text-align: center;
	}
  
  .index .images {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    height:600rpx;
  }
  
  .index .site-box {
    display: flex;
    align-content: center;
    justify-content: center;
    width:212rpx;
    height:96rpx;
    width:100%;
    margin-top: 150rpx;
  }

  .index .site-name {
    width:212rpx;
    height:96rpx;
    display: flex;
    align-content: center;
    justify-content: center;
    position: relative;
  }
  
  .index .logo-box {
    display: flex;
    align-content: center;
    justify-content: center;
    height: 380rpx;
    width: 400rpx;
    position: relative;
    width:100%;
    margin-top: 80rpx;
  }
  
	.index .logo {
    display: flex;
    align-content: center;
    justify-content: center;
		height: 380rpx;
		width: 400rpx;
	}

	.index .des {
    display: flex;
    justify-content: center;
    align-items: center;
		font-size: 14px;
    height: 150px;
    color: #8f8f94;
    padding: 0 60px;
	}
  
  .index .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .index .reg {
    font-size:28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    width:420rpx;
    height:100rpx;
    line-height:100rpx;
    color:#fff;
    border-radius: 80rpx;
    background: linear-gradient(left,#F5316F,#FF7B43 );
    box-shadow: 0px 0px 5px #d6d6d6;
  }
  
  .index .login {
    font-size:28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    width:420rpx;
    height:100rpx;
    line-height:100rpx;
    border-radius: 80rpx;
    box-shadow: 0px 0px 5px #d6d6d6;
    background: #fff;
    color:#F5316F;
  }
  
</style>
